<script setup name="search">
import { ScanCode, Search } from '@icon-park/vue-next'
import { hotSearch } from "@/services/search"
import { ref, onMounted } from 'vue'
import IconPark from '@/components/common/IconPark.vue'

defineProps({
  showScanCode: {
    type: Boolean,
    default: true
  }
})

// 热搜列表
const hotSearchList = ref([])

// 获取热搜词
const loadData = async () => {
  const { result } = await hotSearch()
  hotSearchList.value = result.hots
}

onMounted(() => loadData())
</script>

<template>
  <div class="search">
    <div class="search-bg">
      <IconPark :icon="Search" :size="4" fill="#9f9f9f" :strokeWidth="3" />
      <van-swipe vertical class="search-swipe" :autoplay="5000" :touchable="false" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in hotSearchList" :key="index">
          <RouterLink class="search-swipe-content" :to="{ path: '/search', query: { keyword: item.first } }">
            <div class="van-ellipsis search-swipe-content-item">
              {{ item.first }}
            </div>
          </RouterLink>
        </van-swipe-item>
      </van-swipe>
    </div>
    <IconPark v-if="showScanCode" :icon="ScanCode" :size="5" fill="#9f9f9f" :strokeWidth="3" />
  </div>
</template>

<style scoped lang="scss">
.search {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &-bg {
    width: 90%;
    height: 30px;
    background-color: var(--color-background-soft);
    border-radius: 30px;
    cursor: pointer;
    position: relative;

    .i-icon-search {
      position: absolute;
      top: 6px;
      left: 12px;
    }
  }

  &-swipe {
    height: 32px;
    line-height: 32px;
    padding-left: 34px;
    align-items: center;

    &-content {
      color: #9f9f9f;
    }
  }

  .i-icon-scan-code {
    position: absolute;
    right: 30px;
    top: 6px;
  }
}
</style>